<template>
   <a-form :form="form" :key="id">
      <!-- 表格 -->
      <a-table
        ref="TableInfo"
        :columns="columns"
        :rowKey="(record) => record.id"
        :dataSource="dataSource"
        :pagination="pagination"
        :loading="loading"
        :rowSelection="{
          selectedRowKeys: selectedRowKeys,
          onChange: onSelectChange,
        }"
        :scroll="{ x: 900 }"
        @change="handleTableChange"
      >
      </a-table>
    </a-form>
</template>
<script>
import { mapState, mapMutations } from "vuex";

const formItemLayout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 8 },
};
export default {
  name: "FeeTableInfo",
  props: {
  },
  data() {
    return {
      formItemLayout,
      form: this.$form.createForm(this),
      roleData: [],
      userId: "",
      loading: false,
       dataSource: [],
       pagination: {
        pageSizeOptions: ["10", "20", "30", "40", "100"],
        defaultCurrent: 1,
        defaultPageSize: 10,
        showQuickJumper: true,
        showSizeChanger: true,
        showTotal: (total, range) =>
          `显示 ${range[0]} ~ ${range[1]} 条记录，共 ${total} 条记录`,
      },
    };
  },
  computed: {
   columns() {
      let { sortedInfo, filteredInfo } = this;
      sortedInfo = sortedInfo || {};
      filteredInfo = filteredInfo || {};
      return [
        {
          title: "分段开始值(元、不包含)",
          dataIndex: "pStartValue",
          sorter: true,
          sortOrder: sortedInfo.columnKey === "pStartValue" && sortedInfo.order,
          fixed: "left",
          width: 120,
        },
        {
          title: "分段结束值(元、包含)",
          dataIndex: "pEndValue",
          width: 120,
        },
        {
          title: "分段计算方式",
          dataIndex: "pCalType",
          width: 120,
          customRender:(text,row,index)=>{
            switch (text) {
              case "1":
                return "按比例";
              case "2":
                return "按固定金额";
              case "3":
                return "按比例+封顶值";
            }
          }
        },
        {
          title: "分段比率(‰)",
          dataIndex: "pFeeRate",
          width: 120,
        },
        {
          title: "分段比率封顶值(元)",
          dataIndex: "pFeeRateMax",
          width: 120,
        },
        {
          title: "分段固定值(元)",
          dataIndex: "pValue",
          width: 120,
        },
      ];
    },
  },
  mounted() {
    this.fetch();
  },
  methods: {
    ...mapMutations({
      setUser: "account/setUser",
    }),
    onClose() {
      this.loading = false;
      this.form.resetFields();
      this.$emit("close");
    },
    handleSubmit() {
      this.form.validateFields((err, values) => {
        if (!err) {
          this.loading = true;
          let user = this.form.getFieldsValue();
          user.roleId = user.roleId.join(",");
          user.userId = this.userId;
          user.deptId = this.userDept;
          this.$put("user", {
            ...user,
          })
            .then((r) => {
              this.loading = false;
              this.$emit("success");
              // 如果修改用户就是当前登录用户的话，更新其state
              if (user.username === this.currentUser.username) {
                this.$get(`user/${user.username}`).then((r) => {
                  this.setUser(r.data);
                });
              }
            })
            .catch(() => {
              this.loading = false;
            });
        }
      });
    },
     fetch(params = {}) {
      // 显示loading
      this.loading = true;
      if (this.paginationInfo) {
        // 如果分页信息不为空，则设置表格当前第几页，每页条数，并设置查询分页参数
        this.$refs.TableInfo.pagination.current = this.paginationInfo.current;
        this.$refs.TableInfo.pagination.pageSize = this.paginationInfo.pageSize;
        params.pageSize = this.paginationInfo.pageSize;
        params.pageNum = this.paginationInfo.current;
      } else {
        // 如果分页信息为空，则设置为默认值
        params.pageSize = this.pagination.defaultPageSize;
        params.pageNum = this.pagination.defaultCurrent;
      }
      //   this.$get("feeTableInfo", {
      //     ...params,
      //   }).then((r) => {
      //     let data = r.data;

      let data = {
        content: [
          {
            id: "4028b8817885e8620178887f05bc01e1",
            pCalType:'1'
          },
        ],
        last: false,
        totalPages: 234,
        totalElements: 3506,
        first: true,
        numberOfElements: 2,
        sort: [
          {
            direction: "DESC",
            property: "id",
            ignoreCase: false,
            nullHandling: "NATIVE",
            ascending: false,
          },
        ],
        size: 2,
        number: 0,
      };
      const pagination = { ...this.pagination };
      pagination.total = data.size;
      this.dataSource = data.content;
      this.pagination = pagination;
      // 数据加载完毕，关闭loading
      this.loading = false;
      //   });
    },
  },
  watch: {},
};
</script>
